<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_computed和methods的区别</title>
  <!-- 
  在 Vue 中， `computed` （计算属性）和  `methods` （方法）都是用于处理数据和逻辑的工具，但它们有不同的用途和特点
  1. 定义和用途
  - computed（计算属性）：
    - 用于定义基于已有数据的动态计算属性。
    - 计算属性的值是基于其他数据属性计算得出的，且会根据依赖的数据自动更新。
    - 适合用于需要频繁访问的数据处理，如格式化、过滤等。

  - methods（方法）：
    - 用于定义可以在模板中调用的函数。
    - 方法可以执行任何逻辑，包括数据修改、事件处理等。
    - 适合用于处理用户交互或执行一次性操作。

  2. 缓存机制
  - computed：
    - 计算属性的结果会被缓存，只有当其依赖的数据发生变化时，才会重新计算。这意味着在多次访问计算属性时，如果依赖的数据没有变化，Vue 会直接返回缓存的结果，从而提高性能。

  - methods：
    - 每次调用方法时，都会执行函数体内的逻辑，不会缓存结果。即使依赖的数据没有变化，每次调用都会重新计算。

  3. 访问方式
  - computed：
    - 在模板中以属性的方式访问，像访问普通数据属性一样。例如： `{{ computedProperty }}` 。

  - methods：
    - 在模板中以函数的方式调用，带括号。例如： `{{ methodName() }}` 。

  4. 示例对比
   计算属性示例：
  <template>
    <div>
      <p>原始值：{{ number }}</p>
      <p>计算值：{{ doubledNumber }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        number: 5,
      };
    },
    computed: {
      doubledNumber() {
        return this.number * 2; // 计算属性
      },
    },
  };
  </script>
   方法示例：
  <template>
    <div>
      <p>原始值：{{ number }}</p>
      <p>计算值：{{ doubleNumber() }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        number: 5,
      };
    },
    methods: {
      doubleNumber() {
        return this.number * 2; // 方法
      },
    },
  };
  </script>

  5. 使用场景
  - 使用计算属性：
    - 当需要频繁使用某个计算值，并且希望提高性能时，使用计算属性。
    - 适合用于格式化、过滤等操作。

  - 使用方法：
    - 当需要执行某些操作（如事件处理）时，使用方法。
    - 适合用于处理用户输入、提交表单等场景。

  总结
  -  `computed` ：用于定义动态计算属性，具有缓存机制，适合频繁访问的计算值。
  -  `methods` ：用于定义可以调用的函数，没有缓存机制，适合执行一次性操作或处理事件。
  -->
</head>
<body>

  <div id="app">
    <h3>1. methods</h3>
    <div>{{ geFullName() }}</div>
    <div>{{ geFullName() }}</div>
    <div>{{ geFullName() }}</div>

    <h3>2. computed</h3>
    <div>{{ fullName }}</div>
    <div>{{ fullName }}</div>
    <div>{{ fullName }}</div>
  </div>

  <script src="../lib/vue.js"></script>
  <script>

    const { createApp, ref, computed } = Vue

    createApp({
      setup() {
        const firstName = ref('John')
        const lastName = ref('Doe')

        const fullName = computed(() => {
          return `${firstName.value} ${lastName.value}`
        })

        const geFullName = () => {
          return `${firstName.value} ${lastName.value}`
        }

        return {
          firstName,
          lastName,
          fullName,
          geFullName
        }
      }
    }).mount('#app')

  </script>
  
</body>
</html>